<template>
    <div>
        <template v-for="(item, index) in menuList">
            <Dropdown v-if="item.children.length > 0" placement="right-start" :key="index" @on-click="changeMenu">
                <Button style="width: 60px;" type="text">
                    <Icon :size="20" :color="iconColor" :type="item.icon"></Icon>
                </Button>
                <DropdownMenu style="width: 200px;" slot="list">
                    <template v-for="child in item.children">
                        <DropdownItem :name="child.name" :key="child.title">
                            <Icon :type="child.icon"></Icon>
                            <span style="padding-left:10px;">{{ child.title }}</span>
                        </DropdownItem>
                    </template>
</DropdownMenu>
</Dropdown>
<Dropdown v-else placement="right-start" :key="index" @on-click="changeMenu">

    <Button @click="changeMenu(item.name)" style="width: 60px;" type="text">
                    <Icon :size="20" :color="iconColor" :type="item.icon"></Icon>
                </Button>
    <DropdownMenu style="width: 200px;" slot="list">
        <DropdownItem :name="item.name" :key="item.title">
            <Icon :type="item.icon"></Icon><span style="padding-left:10px;">{{ item.title }}</span></DropdownItem>
    </DropdownMenu>
</Dropdown>
</template>

</div>
</template>

<script>
    export default {
        name: 'sidebarMenuShrink',
        props: {
            menuList: {
                type: Array
            },
            iconColor: {
                type: String,
                default: 'white'
            }
        },
        data() {
            return {
                currentPageName: this.$route.name,

            };
        },
        computed: {
            tagsList() {
                return this.$store.state.tagsList;
            }
        },
        methods: {
            changeMenu(active) {
                this.$store.dispatch('recordPageTags', active)
                this.$store.commit('setCurrentPageName', active);
                this.$router.push({
                    name: active
                });
            }
        },
        watch: {
            '$route' (to) {
                this.currentPageName = to.name;
                localStorage.currentPageName = to.name;
            }
        }
    };
</script>